import React from 'react';

function Function(props) {
  console.log('函数被执行');
  return (
    <>
      <button onClick={props.x2}>X2</button>
      <div>第一个函数组件 {props.timer}</div>
    </>
  );
}

class FunctionTimer extends React.Component {
  state = {
    timer: 0,
  };

  timer;

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ timer: this.state.timer + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  x2 = () => {
    this.setState({ timer: this.state.timer * 2 });
  };

  // 计时器
  render() {
    const { timer } = this.state;
    return <Function timer={timer} x2={this.x2} />;
  }
}

export default FunctionTimer;
